<template>
  <header>
    <div class="container">
      <nav>
        <div class="logo">
          <img src="https://dashscope-result-wlcb-acdr-1.oss-cn-wulanchabu-acdr-1.aliyuncs.com/1d/e6/20251011/5020e443/3396cfc2-a68b-4f22-a47b-f0429fb3d1bf496939121.png?Expires=1760250334&OSSAccessKeyId=LTAI5tKPD3TMqf2Lna1fASuh&Signature=MeZ7YoSOfyfRfTSG5PdEnadvQw8%3D" alt="企业Logo">
        </div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">公司介绍</router-link>
        <router-link to="/services">业务范围</router-link>
        <router-link to="/projects">成功案例</router-link>
        <router-link to="/tutorials">教程</router-link>
        <router-link to="/architecture">架构</router-link>
        <router-link to="/latest-posts">最新动态</router-link>
        <router-link to="/contact">联系我们</router-link>
      </nav>
    </div>
  </header>
  
  <main class="container">
    <router-view></router-view>
  </main>

  <footer>
    <div class="container">
      <p>&copy; 2023 企业官网. 保留所有权利.</p>
    </div>
  </footer>
</template>

<script setup>
// 根组件
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

header {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.logo img {
  height: 40px;
}

nav a {
  text-decoration: none;
  color: #333;
  margin-left: 1.5rem;
  font-weight: 500;
  transition: color 0.3s;
}

nav a.router-link-active,
nav a:hover {
  color: #3498db;
}

main {
  min-height: calc(100vh - 120px);
  padding: 2rem 0;
}

footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 1.5rem 0;
}
</style>